import type { ProgressBarProps } from 'antd-mobile/es/components/progress-bar'
import type { HomeType } from '../../interface'
import { useLocalObservable, useObserver } from 'mobx-react'
import { Plate } from '../Plate/index'
import { Button, Space } from 'antd-mobile'
import { UpOutline, DownOutline } from 'antd-mobile-icons'
import ProgressBar from 'antd-mobile/es/components/progress-bar'
import stylesPlate from '../Plate/index.module.less'
import classNames from 'classnames/bind'
import styles from './index.module.less'
import { toJS } from 'mobx'

/** 进度条 */
const ProcessBarWrap = (
    props: {
        label: string
        /** 总数 */
        counter: number
    } & ProgressBarProps,
) => {
    const cx = classNames.bind(styles)

    return (
        <div className={cx('courseRanking_process')}>
            <label className={cx('courseRanking_process_label')}>
                <span>{props.label}</span>
            </label>
            <div className={cx('courseRanking_process_content')}>
                <ProgressBar {...props} />
            </div>
            <div className={cx('courseRanking_process_counter')}>
                <span>{props.counter}</span>
            </div>
        </div>
    )
}

/** 开班排行榜 */
const CourseRanking = (props: {
    className: string
    /** 数据 */
    data: HomeType.ChinaMapDatum[]
    /** 最多显示多少条数据 */
    maxShow: number
}) => {
    const coursesStore = useLocalObservable(() => ({
        /** 是否展开 */
        expand: false,
        /** 当前年份 */
        // currentYarn: props.defaultSelectedYarn ?? null,
    }))

    return useObserver(() => {
        /** 依据开办数量倒序排列 */
        const data = toJS(props.data).sort(
            (prev, next) => next.group.plan_total - prev.group.plan_total,
        )
        /** 关闭时展示的数据 */
        const closedData = data.slice(0, props.maxShow)
        /** 当前展示的数据 - {@link coursesStore.expand} */
        const currentData = coursesStore.expand ? data : closedData

        const Title = (
            <div>
                开班排行榜
                <span className={stylesPlate.plate_subtitle}>（依据开班数量排名）</span>
            </div>
        )

        const Footer = data.length > props.maxShow && (
            <Space justify="center" block>
                <Button
                    style={{ color: '#666' }}
                    size="small"
                    fill="none"
                    onClick={() => (coursesStore.expand = !coursesStore.expand)}
                >
                    <span className={styles.courseRanking_more_view}>查看更多省份</span>
                    {coursesStore.expand ? (
                        <UpOutline fontSize={16} color="#666" />
                    ) : (
                        <DownOutline fontSize={16} color="#666" />
                    )}
                </Button>
            </Space>
        )

        return (
            <Plate
                className={`${styles.courseRanking} ${props.className}`}
                title={Title}
                footer={Footer}
            >
                {currentData.map(item => {
                    return (
                        <ProcessBarWrap
                            key={item.code}
                            label={item.name}
                            counter={item.group.plan_total}
                            percent={item.group.real_total}
                        />
                    )
                })}
            </Plate>
        )
    })
}

export default CourseRanking
